<script setup lang="ts">
const props = withDefaults(defineProps<Props>(), {
  multiple: false,
  placeholder: '请选择',
})
const emit = defineEmits(['select'])
interface Props {
  placeholder?: string
  multiple?: boolean
  options: any[]
}

const model = defineModel<string | number | Array<any>>()
const _options = ref<any[]>([])
const onChange = (item) => {
  model.value = item.id
  emit('select', item)
}
// 解决select下拉框，分组情况下，回显id的问题
const fallbackOption = (value) => {
  const item = _options.value.find(item => item.id === value)
  if (item) {
    return {
      value,
      label: item.fullName,
    }
  } else {
    return {
      value,
      label: value,
    }
  }
}
watchEffect(() => {
  _options.value = props.options || []
})
</script>

<template>
  <a-select
    v-model="model"
    :placeholder="props.placeholder"
    allow-clear
    :multiple="props.multiple"
    :allow-search="{ retainInputValue: true }"
    value-key="id"
    :fallback-option="fallbackOption"
    @change="onChange"
  >
    <a-option v-for="item in options" :key="item.id" :value="item">
      <a-space direction="vertical" size="mini">
        <div class="leading-13px">
          {{ item.fullName }}
        </div>
        <div class="my-4px text-12px text-gray-4 leading-12px">
          ({{ item.startDate }}~{{ item.endDate }})
        </div>
      </a-space>
    </a-option>
  </a-select>
</template>

<style scoped>
:deep(.arco-select-option-content) {
  width: 100%;
}
</style>
